<!DOCTYPE html>
<html>
<head>
	<title>聊天室</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="public/expands/layui/css/layui.css">
	<link rel="stylesheet" type="text/css" href="public/css/chat.css">
</head>
<body>
	<div class="layui-container">
	  	<div class="layui-row">
		    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
		      	<div class="he_xin_code">
		      		<!-- 操作列 -->
		      		<div class="layui-col-xs1 layui-col-sm1 layui-col-md1 action_col">
		      			<!-- 当前用户头像 -->
		      			<div class="self_headpic">
		      				<div class="self_headpic_child_div">
		      					<img class="layui-circle" src="public/images/headpic/self.jpg">
		      				</div>
		      			</div>
		      			<!-- 通讯列表图标 -->
		      			<div class="mailing_list_icon">
		      				<div class="mailing_list_icon_child_div">
		      					<a><i class="layui-icon layui-icon-user"></i></a>
		      				</div>
		      			</div>
		      		</div>
		      		<!-- 聊天人员记录列表 -->
		      		<div class="layui-col-xs3 layui-col-sm3 layui-col-md3 chat_list">
		      			<div class="layui-card chat_list_child_div">
						  	<div class="layui-card-header user_div">
						  		<div class="layui-col-md3">
						  			<div class="user_headpic">
						  				<img src="public/images/headpic/self.jpg">
						  			</div>
						  		</div>
						  		<div class="layui-col-md7">
						  			<div class="user_nickname">长治拼车群</div>
						  		</div>
						  		<div class="layui-col-md2">
						  			<div class="last_news_time" style="">21/3/15</div>
						  		</div>
						  	</div>
						</div>
		      		</div>
		      		<!-- 消息记录及聊天输入框 -->
		      		<div class="layui-col-xs8 layui-col-sm8 layui-col-md8 message_log_code">
		      			<!-- 顶部标题 -->
		      			<div class="layui-row now_chat_user">
		      				<div class="now_chat_user_info">
		      					<span class="now_chat_user_nickname">汽车俱乐部</span>
		      					<span class="now_chat_user_icon">
		      						<a onclick="chat_setting(this)"><i class="layui-icon layui-icon-more"></i></a>
		      					</span>
		      				</div>
		      			</div>
		      			<!-- 聊天记录 -->
		      			<div class="layui-row message_log">
		      				<div class="message_log_child_div">
	      						<!-- <div class="layui-card message">
								  	<div class="layui-card-header send_time">11:30</div>
								  	<div class="layui-card-header layui-inline other_user_headpic">
								  		<div class="user_headpic_div">
								  			<img src="public/images/headpic/self.jpg">
								  		</div>
								  	</div>
								  	<div class="layui-card-body layui-inline other_user_content" style="">
								    	卡片式面板面板通常用于非白色背景色的主体内<br>
								    	从而映衬出边框投影
								  	</div>
								</div>


								<div class="layui-card message">
								  	<div class="layui-card-header send_time">11:30</div>
								  	<div class="self_headpic_and_content">
								  		<div class="layui-card-body layui-inline self_user_content" style="">
									    	卡片式面板面板通常用于非白色背景色的主体内<br>
									    	从而映衬出边框投影
									  	</div>
									  	<div class="layui-card-header layui-inline self_user_headpic">
									  		<div class="user_headpic_div">
									  			<img src="public/images/headpic/self.jpg">
									  		</div>
									  	</div>
								  	</div>
								</div> -->
								
		      				</div>
		      			</div>
		      			<!-- 内容输入区域 -->
		      			<div class="layui-row">
		      				<div class="content_input">
		      					<textarea id="demo" style="display: none;"></textarea>
		      					<div class="send_btn">
		      						<button type="button" class="layui-btn" id="send_btn_sub">发送</button>
		      					</div>
		      				</div>
		      			</div>
		      		</div>
		      	</div>
		    </div>
	  	</div>
	</div>
</body>

</html>
<script type="text/javascript" src="public/expands/layui/layui.all.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script type="text/javascript">
	//浏览器访问地址示例：http://socket.test/socket/app/chat.html?uid=1，uid表示用户id
	var layedit = layui.layedit,
		$ = layui.jquery,
		url = layui.url(),
		param = url.search;
	layedit.set({
	  	uploadImage: {
	    	url: 'upload.php', //接口url
	  	}
	});
  	var newlayedit = layedit.build('demo', {
  		height: 110,
  		tool: ['face', 'image']
  	}); //建立编辑器
  	let data = [];


  	if (! "WebSocket" in window) {
        layer.msg('您的浏览器不支持 WebSocket!');
    }
    //连接服务端
    // const ws = new WebSocket('ws://127.0.0.1:8081');
    const ws = new WebSocket('ws://10.3.141.169:8081');
   	//  let readyState = 0;
    /**
     * readyState  返回当前 WebSocket 的链接状态
     * 0 连接中  1连接成功可以通讯  2连接正在关闭  3连接已关闭或者没有链接成功
     */
    ws.onopen = function(evt) { 
        readyState = ws.readyState;
        if (readyState != 1) alert('连接失败'); 
        var data = {'user_id' : param.uid};
        sendMsg(data);
    };
    //接收消息
    ws.onmessage = function(evt) {
    	
    	// console.log(evt.data);
    	let val = JSON.parse(evt.data);
    	$(".message_log_child_div").append(html.other_message(val.content));
    	
    };

    ws.onerror = () => layer.msg('WebSocket连接失败');

   //发送消息
   	send_btn_sub.onclick = function () {
   		let content = layedit.getContent(newlayedit),
   			field = {'user_id' : param.uid, content};
   		sendMsg(field);
   		$(".message_log_child_div").append(html.self_message(content));
   		layedit.setContent(newlayedit,'')
   		// console.log(con);
   	}
    /**
     * 将数据转为json并发送
     * @param msg
     */
    function sendMsg(msg) {
    	
        var res = JSON.stringify(msg);
        ws.send(res);
    }

    const html = {
    	time : moment().format('Y/M/d h:mm:ss'),
    	//自己发送的消息
    	self_message (msg) {
    		let code = `<div class="layui-card message">
						  	<div class="layui-card-header send_time">${moment().format('Y/M/d h:mm:ss')}</div>
						  	<div class="self_headpic_and_content">
						  		<div class="layui-card-body layui-inline self_user_content" style="">
							    	${msg}
							  	</div>
							  	<div class="layui-card-header layui-inline self_user_headpic">
							  		<div class="user_headpic_div">
							  			<img src="public/images/headpic/self.jpg">
							  		</div>
							  	</div>
						  	</div>
						</div>`;
			return code;
    	},
    	//别人发送的消息
    	other_message (msg) {
    		let code = `<div class="layui-card message">
						  	<div class="layui-card-header send_time">${moment().format('Y/M/d h:mm:ss')}</div>
						  	<div class="layui-card-header layui-inline other_user_headpic">
						  		<div class="user_headpic_div">
						  			<img src="public/images/headpic/self.jpg">
						  		</div>
						  	</div>
						  	<div class="layui-card-body layui-inline other_user_content" style="">
						    	${msg}
						  	</div>
						</div>`;
			return code;
    	},
    };
</script>